<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        tr td,
        tr th {
            text-align: center !important;
            border: none !important;
        }

        .layui-laydate-content tr td {
            border-bottom: none !important;
            border-top: none !important;
        }

        tr td {
            border-bottom: 1px solid #eee !important;
            border-top: 1px solid #eee !important;
        }

        label {
            display: inline-block;
            text-align: left;
            width: 100px;
        }

        .layui-show-xs-block {
            width: 158px;
        }

        .layui-col-md3 {
            margin-bottom: 10px;
        }

        .layui-form-item .layui-inline {
            margin-right: 0px;
        }

        .rotate {

            transform-origin: center center;

            transform: rotate(180deg);

            -webkit-transform: rotate(180deg);

            -moz-transform: rotate(180deg);

            -ms-transform: rotate(180deg);

            -o-transform: rotate(180deg);

            transition: transform 0.2s;
            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }

        .rotate1 {

            transform-origin: center center;

            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);

            -moz-transform: rotate(deg);

            -ms-transform: rotate(0deg);

            -o-transform: rotate(0deg);

            transition: transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">用户管理
                        </blockquote>
                    </div>
                    <div class="layui-card-body " style="display: flex;">
                        <blockquote style="cursor: pointer" class="layui-elem-quote"
                            onclick="xadmin.open('新增用户','add_user.html',600,600)"><i class="layui-icon">&#xe654;</i>新增用户
                        </blockquote>
                        <blockquote style="cursor: pointer" class="layui-elem-quote importsMore" id="importsMore"
                            onclick="xadmin.open('导入','import_users.html',600,400)"><i
                                class="layui-icon">&#xe635;</i>批量导入
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <!-- <div class="layui-card-header">数据统计</div> -->
                    <div class="layui-fluid">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div class="layui-card-body ">
                                    <label>&emsp;真实姓名：</label>
                                    <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                        <input id="name" name="name" class="layui-input">
                                    </div>
                                    <button class="layui-btn search" data-type="reload" lay-filter="add">搜索
                                    </button>
                                    <i style="position: relative;font-size: 18px;left: 15px;top: 5px;cursor: pointer;display: inline-block;"
                                        class="layui-icon layui-icon-down rotate1"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 shaixuan" style="display: none;">
                <div class="layui-card">
                    <!-- <div class="layui-card-header">数据统计</div> -->
                    <div class="layui-fluid">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div class="layui-card-body " style="display: flex;justify-content:space-between">
                                    <form class="layui-form" action="" style="width: 100%;">
                                        <div class="layui-form-item layui-col-md12">
                                            <div class="layui-inline layui-col-md3"><label>&emsp;用户分类：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="personalOrGroup" name="personalOrGroup"
                                                        lay-filter="personalOrGroup">
                                                        <option value="">请选择</option>
                                                        <option value="1">个人用户</option>
                                                        <option value="2">团体用户</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;起始注册时间：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <input id="beginTime" name="beginTime" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;结束注册时间：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <input id="EndTime" name="EndTime" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;城市：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="s_province" name="s_province"
                                                        lay-filter="s_province"></select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;地区：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="s_city" name="s_city" lay-filter="s_city"></select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;性别：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="sex" name="sex" lay-filter="sex">
                                                        <option value="">请选择</option>
                                                        <option value="1">男</option>
                                                        <option value="2">女</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;是否会员：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="isVip" name="isVip" lay-filter="isVip">
                                                        <option value="">请选择</option>
                                                        <option value="1">是</option>
                                                        <option value="2">否</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;缴费时间：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <input id="payTime" name="payTime" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;手机号：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <input id="tel" name="tel" class="layui-input">
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;个人身份：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="userIdent" name="userIdent" lay-filter="userIdent">
                                                        <option value="">请选择</option>
                                                        <option value="1">教练员</option>
                                                        <option value="2">裁判员</option>
                                                        <option value="3">球员</option>
                                                        <option value="9">其他</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;团队类型：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="groupType" name="groupType" lay-filter="groupType">
                                                        <option value="">请选择</option>
                                                        <option value="2">俱乐部</option>
                                                        <option value="3">公司</option>
                                                        <option value="4">学校</option>
                                                        <option value="5">其他</option>
                                                        <option value="6">各地足协</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="layui-inline layui-col-md3"><label>&emsp;用户状态：</label>
                                                <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                                    <select id="ishidden" name="ishidden" lay-filter="ishidden">
                                                        <option value="">请选择</option>
                                                        <option value="0">正常</option>
                                                        <option value="1">拉黑</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card-body layui-table-body layui-table-main">

                <!-- 表格部分开始 -->
                <table id="video_table" lay-filter="test" lay-data="{id: 'testReload'}"></table>
                <script type="text/html" id="shengshi">
                    {{#  if(d.city){ }}
                    {{d.city}}
                    {{#  }}}
                    {{#  if(d.area){ }}
                    {{d.area}}
                    {{#  } }}
                </script>
                <script type="text/html" id="barDemo">
                    <!--<a lay-event="detail" class="btn_a layui-btn primary layui-btn-xs">查看</a>-->
                <a lay-event="edit" class="btn_a layui-btn layui-btn-xs">修改</a>
                <a lay-event="del" class="btn_a layui-btn layui-btn-danger layui-btn-xs">拉黑</a>
                <a lay-event="reset" class="btn_a layui-btn primary layui-btn-xs">重置密码</a>
                </script>
                <!-- 表格结束 -->
            </div>
        </div>
    </div>
    </div>
</body>

</html>
<script src="../js/area2.js"></script>
<script>
    _init_area();
    layui.use(['table', 'form', 'laydate', 'upload', 'element'], function () {
        //下拉框
        $(".layui-icon.layui-icon-down").on("click", function () {
            $(".shaixuan").stop(true, false);
            if ($(this).hasClass("rotate") && !$(this).hasClass("rotate1")) {
                $(this).removeClass("rotate").addClass("rotate1");
                $(".shaixuan").slideUp()
            } else if ($(this).hasClass("rotate1") && !$(this).hasClass("rotate")) {
                $(this).removeClass("rotate1").addClass("rotate");
                $(".shaixuan").slideDown()
            }
        })

        // $(".importsMore").on('click',function(){
        //     //指定允许上传的文件类型
        //     upload.render({
        //         elem: '#importsMore',
        //         url: path+'/FacjudgController/uploadImg.do',
        //         accept: 'file',
        //         multiple: false,
        //         done: function(res){
        //             console.log(res);
        //         }
        //     });
        // })
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var date1 = laydate.render({
            elem: '#beginTime',
            type: 'date'
        })
        var date2 = laydate.render({
            elem: '#EndTime',
            type: 'date'
        })
        var date3 = laydate.render({
            elem: '#payTime',
            type: 'date'
        })
        var index = layer.load(1); //添加laoding,0-2两种方式
        form.on('select(s_province)', function (data) {
            change(1);
            form.render('select');
        });
        form.on('select(s_city)', function (data) {
            change(2);
            form.render('select');
        });
        //第一个实例
        var ins1 = table.render({
            elem: '#video_table', //指定原始表格元素选择器（推荐id选择器）
            // height: 600,
            width: "100%",
            // 附加参数，post token
            // where: { 'token': token },
            loading: true,
            method: 'get',
            url: user_manage, //数据接口
            page: true, //开启分页
            // toolbar: 'default', //开启工具栏，此处显示默认图标
            cols: [
                [ //表头
                    // { type: 'checkbox', fixed: 'left' },
                    {
                        field: 'id',
                        title: 'ID',
                        width: 150
                    },
                    {
                        field: 'userName',
                        title: '账号',
                        width: 150
                    },

                    {
                        field: 'name',
                        title: '真实姓名',
                        width: 150
                    },
                    {
                        field: 'sex',
                        title: '性别',
                        width: 150,
                        templet: function (d) {
                            if (d.sex == "1") {
                                return "男"
                            } else if (d.sex == "2") {
                                return "女"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'personalOrGroup',
                        title: '个人/团体用户',
                        width: 150,
                        templet: function (d) {
                            if (d.personalOrGroup == "1") {
                                return "个人用户"
                            } else if (d.personalOrGroup == "2") {
                                return "团队用户"
                            } else {
                                return ""
                            }
                        }
                    },

                    {
                        field: 'nickName',
                        title: '用户昵称',
                        width: 150
                    },
                    {
                        title: '城市地区',
                        width: 150,
                        templet: "#shengshi"
                    },
                    {
                        field: 'documentType',
                        title: '证件类型',
                        width: 150,
                        templet: function (d) {
                            if (d.documentType == "1") {
                                return "身份证"
                            } else if (d.documentType == "2") {
                                return "护照"
                            } else if (d.documentType == "3") {
                                return "户口本"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'documentNumber',
                        title: '证件号',
                        width: 150
                    },
                    {
                        field: 'identity',
                        title: '身份类型',
                        width: 150
                    },
                    {
                        field: 'groupType',
                        title: '团体类型',
                        width: 150,
                        templet: function (d) {
                            if (d.groupType == "2") {
                                return "俱乐部"
                            } else if (d.groupType == "3") {
                                return "公司"
                            } else if (d.groupType == "4") {
                                return "学校"
                            } else if (d.groupType == "5") {
                                return "其他"
                            } else if (d.groupType == "6") {
                                return "各地足协"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'address',
                        title: '通讯地址',
                        width: 150
                    },
                    {
                        field: 'tel',
                        title: '手机号',
                        width: 150
                    },
                    {
                        field: 'isVip',
                        title: '是否是会员',
                        width: 150,
                        templet: function (d) {
                            if (d.isVip == "2") {
                                return "否"
                            } else if (d.isVip == "1") {
                                return "是"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'vipTime',
                        title: '会员到期时间',
                        width: 150
                    },
                    {
                        field: 'headPortraitUrl',
                        title: '头像图片',
                        width: 150,
                        templet: function (d) {
                            if (d.headPortraitUrl != "" && d.headPortraitUrl != null) {
                                return "<div onclick='show_img(this)' ><img src='" + d
                                    .headPortraitUrl + "'></div>'"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'addTime',
                        title: '注册时间',
                        width: 150
                    },
                    {
                        field: 'payTime',
                        title: '缴费时间',
                        width: 150
                    },
                    {
                        field: 'ishidden',
                        title: '账号状态',
                        width: 150,
                        templet: function (d) {
                            if (d.ishidden == "0") {
                                return "正常"
                            } else if (d.ishidden == "1") {
                                return "拉黑"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        fixed: 'right',
                        title: "操作",
                        width: 250,
                        align: 'center',
                        toolbar: '#barDemo'
                    }
                ]
            ],
            id: 'testReload',
            done: function (res) {
                layer.close(index)
                if (res.msg == "2") {
                    parent.window.location.href = getRequestPrefix() + "/footBallAdmin/login.html"
                }
            }
        });


        //头部输入框筛选功能
        active = {

            reload: function () {

                var name = $('#name').val();
                var personalOrGroup = $("#personalOrGroup").val();
                var startAddTime = $("#beginTime").val();
                var endAddTime = $("#EndTime").val();
                var city = $("#s_province").val();
                var area = $("#s_city").val();
                if (city == "地级市") {
                    city = ""
                }
                if (area == "地区") {
                    area = ""
                }
                var sex = $("#sex").val()
                var isVip = $("#isVip").val()
                var payTime = $("#payTime").val()
                var tel = $("#tel").val()
                var identity = $("#userIdent").val()
                var ishidden = $("#ishidden").val()
                var groupType = $("#groupType").val()


                // 执行重载（重新加载数据表格）
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        "name": name,
                        "personalOrGroup": personalOrGroup,
                        "startAddTime": startAddTime,
                        "endAddTime": endAddTime,
                        "city": city,
                        "area": area,
                        "sex": sex,
                        "isVip": isVip,
                        "payTime": payTime,
                        "tel": tel,
                        "identity": identity,
                        "ishidden": ishidden,
                        "groupType": groupType
                    }
                }, 'data');
            }
        };


        //给查询添加点击事件
        $('.search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            //一定要阻止表单的默认行为（刷新）
            return false
        });


        //监听头工具栏事件


        //监听点击的按钮，获取行信息
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //获得当前行数据
            var $ = layui.$
            var data = obj.data,
                layEvent = obj.event; //获得 lay-event 对应的值
            // if (layEvent === 'detail') {
            //     // layer.msg('查看操作');
            //     layer.open({
            //         content:"car_detail.html",
            //         type:2,
            //         area:["400px","480px"],
            //         title:"车辆信息",
            //         // shade:true,
            //         shadeClose:true,
            //         success:function(layero,index){
            //             console.log(data)//获取点击行的数据
            //             var body = layer.getChildFrame('body', index);
            //             var iframeWin = window[layero.find('iframe')[0]['name']];
            //             body.find('.car_name').text(data.carName)
            //             body.find('.car_brand').text(data.carBrand)
            //             body.find('.car_type').text(data.carType)
            //             body.find('.car_num').text(data.carNumber)
            //             body.find('.car_driver').text(data.chauffeur)
            //             body.find('.driver_tel').text(data.chauffeurPhone)
            //             body.find('.car_code').text(data.carNo)
            //         }
            //     })
            //     // console.log(data)
            // } else
            if (layEvent === "edit") {
                // layer.msg('修改操作');
                layer.open({
                    content: "edit_user.html",
                    type: 2, //打开的窗口的类型
                    area: ["600px", "600px"],
                    title: "修改用户",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: true,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe

                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        console.log(iframeWin, "子窗口对象")
                        //行信息数据回显
                        console.log(data, "行信息")
                        body.find('#userName').val(data.userName)
                        body.find('#tel').val(data.tel)
                        body.find('#name').val(data.name)
                        body.find('#nickName').val(data.nickName)
                        body.find('#sex').val(data.sex)
                        if (data.isVip == "1") {
                            body.find('#isVip').val("是")
                        } else if (data.isVip == "2") {
                            body.find('#isVip').val("否")
                        }
                        body.find('#payTime').val(data.payTime)
                        if (data.level == "10") {
                            body.find('#level').val("无等级")
                        } else {
                            body.find('#level').val(data.level + "级")
                        }

                        //身份类型回显
                        body.find("#documentType option").each(function (index, item) {
                            if (item.value == data.documentType) {
                                $(this).attr("selected", true)
                                $("#documentType").attr("value", item.text)
                            }
                        })
                        body.find('#documentNumber').val(data.documentNumber)
                        body.find('#address').val(data.address)
                        body.find('#headPortraitUrl').attr("src", data.headPortraitUrl)
                        body.find('#id').val(data.id)
                        body.find("#juese").val(data.typeId)

                        setTimeout(function () {
                            body.find("#typeId").val(data.typeId)
                            iframeWin.layui.form.render()
                        }, 100)
                        setTimeout(function () {
                            body.find("#s_province").val(data.city)
                            iframeWin.change(1);
                            body.find("#s_city").val(data.area)
                            iframeWin.layui.form.render()
                        }, 100)
                        setTimeout(function () {
                            body.find("#zuxieType").val(data.zuxieType)
                            iframeWin.layui.form.render()
                        }, 100)
                        setTimeout(function () {
                            body.find("#groupType").val(data.groupType)
                            iframeWin.layui.form.render()
                        }, 100)

                        iframeWin.layui.form.render("select")
                    }
                })
            } else if (layEvent === "del") {
                layer.confirm('确定拉黑此用户？', function (index) { //点击确定后，才执行下面语句
                    $.ajax({
                        type: "get",
                        url: updateIsHiddenUserById,
                        data: {
                            id: data.id
                        },
                        success: function (res) {
                            // console.log(res,"2da42da2ad12ad42da4")
                            if (res.msg == 0) {
                                //删除成功
                                layer.alert("操作成功")
                                // console.log(index, data);//获取行信息
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                table.reload('testReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                }, 'data');
                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    })

                    //向服务端发送删除指令
                });
            } else if (layEvent === 'reset') {
                layer.confirm('确定重置密码吗？重置后密码为111', function (index) { //点击确定后，才执行下面语句
                    $.ajax({
                        type: "get",
                        url: reset,
                        data: {
                            id: data.id
                        },
                        success: function (res) {
                            // console.log(res,"2da42da2ad12ad42da4")
                            if (res.msg == 0) {
                                //删除成功
                                layer.alert("重置成功")
                                // console.log(index, data);//获取行信息
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                table.reload('testReload', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                }, 'data');
                            } else {
                                layer.msg(res.msg)
                            }
                        }
                    })

                    //向服务端发送删除指令
                });
            }
        });

    });

    /**
     * 点击放大图片
     * @param t
     */
    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['70%', '80%'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center;width:100%;height: 100%;overflow: hidden"><img src="' + $(t)
                .attr('src') + '" style="width:100%;height: 100%;display: block;margin: 0 auto;"/></div>'
        });
    }
</script>